import React, { useState } from 'react'
import './frame8.css'
import AppLayout from '../layout/AppLayout'
import Modal from '../components/Modal'
import './form.css'

export default function Main() {
  const [selectedSegment, setSelectedSegment] = useState(0)
  const [segmentName, setSegmentName] = useState('分段0')
  const [activeTab, setActiveTab] = useState('通用')
  const [showDeleteModal, setShowDeleteModal] = useState(false)
  const [showSaveModal, setShowSaveModal] = useState(false)
  const [showOpenModal, setShowOpenModal] = useState(false)
  const [showImportPython, setShowImportPython] = useState(false)
  const [showImportNeuroML, setShowImportNeuroML] = useState(false)

  return (
    <>
      <AppLayout
        active="文件"
        subbar={(
          <div style={{ display:'flex', alignItems:'center', gap:12, width:'100%' }}>
            <div className="f8-icon-btn" style={{ opacity: selectedSegment === 0 ? 0.5 : 1 }}>◀</div>
            <div className="f8-icon-btn">＋</div>
            <div className="f8-pill">
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 细胞</span>
              <span style={{ color:'#667085', padding:'0 8px', borderLeft:'1px solid #e6eaee', borderRight:'1px solid #e6eaee' }}>＋ 分段</span>
              <span style={{ color:'#667085', padding:'0 8px' }}>＋ 机制</span>
            </div>
            <div style={{ marginLeft:'auto' }} className="f8-icon-btn">▾</div>
          </div>
        )}
      >
        <div style={{ display: 'flex', gap: 40, paddingTop: 24 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="f8-segment-buttons">
              <button 
                className={`f8-segment-btn ${selectedSegment === 0 ? 'active' : ''}`}
                onClick={() => { setSelectedSegment(0); setSegmentName('分段0') }}
              >
                分段0
              </button>
              <button 
                className={`f8-segment-btn ${selectedSegment === 1 ? 'active' : ''}`}
                onClick={() => { setSelectedSegment(1); setSegmentName('分段1') }}
              >
                分段1
              </button>
              <button 
                className={`f8-segment-btn ${selectedSegment === 2 ? 'active' : ''}`}
                onClick={() => { setSelectedSegment(2); setSegmentName('分段2') }}
              >
                分段2
              </button>
            </div>
          </div>
          
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="field">
              <label>分段名称</label>
              <div className="input">{segmentName}</div>
            </div>
            
            <div className="f8-tabs">
              <button 
                className={`f8-tab ${activeTab === '通用' ? 'active' : ''}`}
                onClick={() => setActiveTab('通用')}
              >
                通用
              </button>
              <button 
                className={`f8-tab ${activeTab === '几何结构' ? 'active' : ''}`}
                onClick={() => setActiveTab('几何结构')}
              >
                几何结构
              </button>
              <button 
                className={`f8-tab ${activeTab === '拓扑结构' ? 'active' : ''}`}
                onClick={() => setActiveTab('拓扑结构')}
              >
                拓扑结构
              </button>
            </div>
            
            <div className="f8-tab-content">
              {activeTab === '通用' && (
                <div style={{ minHeight: 200, padding: 20, background: '#f9fbfc', borderRadius: 12 }}>
                  {/* 通用配置内容 */}
                </div>
              )}
              {activeTab === '几何结构' && (
                <div style={{ minHeight: 200, padding: 20, background: '#f9fbfc', borderRadius: 12 }}>
                  {/* 几何结构内容 */}
                </div>
              )}
              {activeTab === '拓扑结构' && (
                <div style={{ minHeight: 200, padding: 20, background: '#f9fbfc', borderRadius: 12 }}>
                  {/* 拓扑结构内容 */}
                </div>
              )}
            </div>
          </div>
        </div>
      </AppLayout>

      {showDeleteModal && (
        <Modal
          title={`删除 ${segmentName}`}
          onClose={() => setShowDeleteModal(false)}
          onConfirm={() => {
            setShowDeleteModal(false)
            // 处理删除逻辑
          }}
          confirmText="确认"
        >
          <p>您是否要移除 {segmentName}?</p>
        </Modal>
      )}

      {showSaveModal && (
        <Modal
          title="另存为 JSON 文件"
          onClose={() => setShowSaveModal(false)}
          onConfirm={() => setShowSaveModal(false)}
          confirmText="确认"
        >
          <div className="field" style={{ marginBottom: 16 }}>
            <label>模型目标路径</label>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>/home/wen/PycharmProjects/神经网络工具-UI-master/workspace:</span>
              <span style={{ marginLeft: 'auto', cursor: 'pointer' }}>📁</span>
            </div>
          </div>
          <div className="field">
            <label>高级选项</label>
            <div className="input" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span>展开选项</span>
              <span>▾</span>
            </div>
          </div>
        </Modal>
      )}

      {showOpenModal && (
        <Modal
          title="打开 JSON 文件"
          onClose={() => setShowOpenModal(false)}
          onConfirm={() => setShowOpenModal(false)}
          confirmText="加载"
        >
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <span>📁</span>
                  <span>JSON 文件</span>
                </div>
              </div>
              <div style={{ marginBottom: 12, padding: 12, background: '#f9fbfc', borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ color: '#2b8a6e' }}>✓</span>
                  <strong>高级网络参数(netParams)</strong>
                </div>
                <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>细胞规则、连接规则等</div>
              </div>
              <div style={{ marginBottom: 12, padding: 12, background: '#f9fbfc', borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ color: '#d1d5db' }}>○</span>
                  <span>实例化网络</span>
                </div>
                <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>所有细胞、连接等</div>
              </div>
              <div style={{ marginBottom: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span>📁</span>
                  <span>Mod文件夹</span>
                </div>
              </div>
            </div>
            <div>
              <div style={{ marginBottom: 12, padding: 12, background: '#f9fbfc', borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ color: '#2b8a6e' }}>✓</span>
                  <strong>模拟配置(simConfig)</strong>
                </div>
                <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>持续时间、记录变量等</div>
              </div>
              <div style={{ marginBottom: 12, padding: 12, background: '#f9fbfc', borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ color: '#d1d5db' }}>○</span>
                  <span>模拟数据</span>
                </div>
                <div style={{ fontSize: 12, color: '#6b7280', marginLeft: 24 }}>尖峰、轨迹等</div>
              </div>
              <div style={{ marginBottom: 12, padding: 12, background: '#f9fbfc', borderRadius: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: '#2b8a6e' }}>✓</span>
                  <span>编译 mod 文件</span>
                </div>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {showImportPython && (
        <Modal
          title="从 Python 脚本导入"
          onClose={() => setShowImportPython(false)}
          onConfirm={() => setShowImportPython(false)}
          confirmText="加载"
        >
          <div className="field" style={{ marginBottom: 16 }}>
            <label>NetParams 文件</label>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>📁</span>
              <span style={{ flex: 1, color: '#9ca3af' }}>选择文件...</span>
            </div>
            <div style={{ fontSize: 12, color: '#6b7280', marginTop: 4 }}>仅 .py 文件</div>
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>NetParams 变量</label>
            <div className="input">netParams</div>
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>SimConfig 文件</label>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>📁</span>
              <span style={{ flex: 1, color: '#9ca3af' }}>选择文件...</span>
            </div>
            <div style={{ fontSize: 12, color: '#6b7280', marginTop: 4 }}>仅 .py 文件</div>
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>SimConfig 变量</label>
            <div className="input">simConfig</div>
          </div>
          <div className="field" style={{ marginBottom: 16 }}>
            <label>mod 文件路径</label>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>📁</span>
              <span style={{ flex: 1, color: '#9ca3af' }}>选择文件夹...</span>
            </div>
          </div>
          <div style={{ fontSize: 12, color: '#6b7280', marginBottom: 16 }}>
            重要提示:若需要外部 mod 文件,请选择 mod 文件夹路径
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: '#2b8a6e' }}>✓</span>
            <span>编译 mod 文件</span>
          </div>
        </Modal>
      )}

      {showImportNeuroML && (
        <Modal
          title="从 NeuroML 2 导入"
          onClose={() => setShowImportNeuroML(false)}
          onConfirm={() => setShowImportNeuroML(false)}
          confirmText="加载"
        >
          <div className="field" style={{ marginBottom: 16 }}>
            <label>选择文件</label>
            <div className="input" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span>📁</span>
              <span style={{ flex: 1, color: '#9ca3af' }}>选择文件...</span>
            </div>
            <div style={{ fontSize: 12, color: '#6b7280', marginTop: 4 }}>仅 .net.nml 文件</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ color: '#2b8a6e' }}>✓</span>
            <span>编译 mod 文件</span>
          </div>
        </Modal>
      )}
    </>
  )
}

